<script setup lang="ts">
import type { OptionsStatus } from '@/types'
import {computed} from 'vue'
import MaterialHeader from '@/components/Materials/Commons/MaterialHeader.vue'
import { getCurrentStatus, getPicTitleDescStatusArr, getStringStatus, getTextStatus } from '@/utils'
const props = defineProps<{
  status:OptionsStatus,
  serialNum: number
}>()


const computedState = computed(()=>({
  desc: getTextStatus(props.status.desc),
  options: getStringStatus(props.status.options),
  position: getCurrentStatus(props.status.position),
  descSize: getPicTitleDescStatusArr(props.status.descSize),
  descWeight: getCurrentStatus(props.status.descWeight),
  descItalic: getCurrentStatus(props.status.descItalic),
  descColor: getTextStatus(props.status.descColor),
}))

const emitAnswer = ()=>{

}
</script>

<template>
  <div class="text-input" :class="{
      'text-center': computedState.position,
    }">
    <MaterialHeader
      :serialNum="serialNum"
      :isShowTitle="false"
      :desc="computedState.desc"
      :descSize="computedState.descSize"
      :descWeight="computedState.descWeight"
      :descItalic="computedState.descItalic"
      :descColor="computedState.descColor"></MaterialHeader>
  </div>
</template>

<style scoped lang="scss">

</style>
